<template>
  <div>
    <el-dialog :visible.sync="showMap" title="搜索后选择地址">
      <div class="map-wrap">
        <el-amap-search-box class="map-search" :on-search-result="onSearchResult" :searchOption="{}" />
        <el-amap class="map" :center="mapCenter" :zoom="16">
          <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker" :events="getMarkerEvents()" />
        </el-amap>
      </div>
    </el-dialog>

    <el-dialog width="90%" :title="!dataForm.id ? $t('Common.Add') : $t('Common.Edit')" :close-on-click-modal="false" :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="auto">
        <el-form-item label="酒店门头照" prop="ewmLogo">
          <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="dataForm.ewmLogo" :src="dataForm.ewmLogo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="名字" prop="name"><el-input v-model="dataForm.name" placeholder="名字"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="星级" prop="star">
              <el-select v-model="dataForm.star" placeholder="活动区域">
                <el-option label="一星及以下/经济" value="1"></el-option>
                <el-option label="二星/实惠" value="2"></el-option>
                <el-option label="三星/舒适" value="3"></el-option>
                <el-option label="四星/高档" value="4"></el-option>
                <el-option label="五星/豪华" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="酒店地址" prop="address"><el-input v-model="dataForm.address" placeholder="酒店地址"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="linkName"><el-input v-model="dataForm.linkName" placeholder="联系人"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="6">
            <el-form-item label="经纬度" prop="coordinates"><el-input v-model="dataForm.coordinates" placeholder="经纬度"></el-input></el-form-item>
          </el-col>
          <el-col :span="2"><el-button @click="getCoordinates" type="primary">快速获取</el-button></el-col>
          <el-col :span="2"><el-button @click="showMap = true" type="primary">地图选点</el-button></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="linkTel"><el-input v-model="dataForm.linkTel" placeholder="联系电话"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="酒店电话" prop="tel"><el-input v-model="dataForm.tel" placeholder="酒店电话"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="开业时间" prop="openTime">
              <el-date-picker style="width:100%" v-model="dataForm.openTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装修时间" prop="openTime">
              <el-date-picker style="width:100%" v-model="dataForm.renovationTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集团品牌" prop="brand"><el-cascader :options="brandOptions" :props="props" v-model="dataForm.brand"></el-cascader></el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isAuth('hotel:hotelseller:admin')">
          <el-col :span="6">
            <el-form-item label="服务商" prop="facilitatorName"><el-input v-model="dataForm.facilitatorName" placeholder="输入服务商编号"></el-input></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邀请码" prop="invitationCode"><el-input v-model="dataForm.invitationCode" placeholder="输入邀请码"></el-input></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总店" prop="superiorSellerName"><el-input v-model="dataForm.superiorSellerName" placeholder="输入总店编号或者总店名称"></el-input></el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="图片" prop="img">
          <el-upload
            :file-list="fileList"
            list-type="picture-card"
            :action="uploadAction"
            :on-success="handleImageSuccess"
            :on-remove="handleImageRemove"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="营业执照" prop="yyImg">
              <el-upload
                :class="yyfileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="yyhandleRemove"
                :on-success="yyhandleSuccess"
                :file-list="yyfileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="yyhandleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="特种行业许" prop="yyImg">
              <el-upload
                :class="tzfileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="tzhandleRemove"
                :on-success="tzhandleSuccess"
                :file-list="tzfileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="tzhandleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="身份证照正面" prop="sfzImg1">
              <el-upload
                :class="sfzfileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfzhandleRemove"
                :on-success="sfzhandleSuccess"
                :file-list="sfzfileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfzhandleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :span="6" label="身份证照背面" prop="sfzImg2">
              <el-upload
                :class="sfbfileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfbhandleRemove"
                :on-success="sfbhandleSuccess"
                :file-list="sfbfileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfbhandleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证照手持" prop="sfzImg3">
              <el-upload
                :class="sfscfileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfschandleRemove"
                :on-success="sfschandleSuccess"
                :file-list="sfscfileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfschandleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="温馨提示" prop="prompt">
        <el-input v-model="dataForm.prompt" placeholder="温馨提示"></el-input>
      </el-form-item>-->
        <el-form-item label="酒店设施" class="hotelseller-addorupdate-jdss">
          <el-checkbox-group v-model="dataForm.facility">
            <el-checkbox v-for="(fac, index) in facility" :label="fac.name">{{ fac.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="酒店主题">
          <el-select v-model="dataForm.topic" placeholder="酒店主题">
            <el-option v-for="(topic, index) in topics" :key="index" :label="topic.name" :value="topic.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="酒店支持">
          <el-checkbox v-model="dataForm.unionpay" :label="1">银联支付</el-checkbox>
          <el-checkbox v-model="dataForm.wxOpen" :label="1">微信支付</el-checkbox>
          <el-checkbox v-model="dataForm.ddOpen" :label="1">到店支付</el-checkbox>
          <el-checkbox v-model="dataForm.yeOpen" :label="1">余额支付</el-checkbox>
        </el-form-item>
        <el-form-item style="height:240px" label="酒店政策" prop="policy">
          <!-- <el-input v-model="dataForm.policy" placeholder="酒店政策"></el-input> -->
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="dataForm.policy"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item><el-button @click="zc()" type="primary">自动输入</el-button></el-form-item>
        <el-form-item label="酒店介绍" style="height:240px" prop="introduction">
          <!-- <el-input v-model="dataForm.introduction" placeholder="酒店介绍"></el-input> -->
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="dataForm.introduction"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item><el-button @click="js()" type="primary">自动输入</el-button></el-form-item>
        <el-form-item label="预定提醒" style="height:240px" prop="reserveRemind">
          <!-- <el-input v-model="dataForm.introduction" placeholder="酒店介绍"></el-input> -->
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="dataForm.reserveRemind"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item><el-button @click="tx()" type="primary">自动输入</el-button></el-form-item>
        <el-form-item label="交通和周边" style="height:240px" prop="traffic">
          <!-- <el-input v-model="dataForm.introduction" placeholder="酒店介绍"></el-input> -->
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="dataForm.traffic"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item><el-button @click="jtzb()" type="primary">自动输入</el-button></el-form-item>

        <!-- <el-form-item label="平台优惠券使用" prop="isUse">
      <el-input v-model="dataForm.isUse" placeholder="平台优惠券使用"></el-input>
      </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
      </span>
    </el-dialog>
    <gallery :images="[showImage]" :index="index" @close="index = null" />
  </div>
</template>

<script>
import VueGallery from 'vue-gallery';
import axios from 'axios';
export default {
  components: {
    gallery: VueGallery
  },
  data() {
    return {
      yyfileList: [],
      sfscfileList: [],
      sfbfileList: [],
      sfzfileList: [],
      tzfileList: [],
      index: null,
      visible: false,
      showMap: false,
      markers: [],
      mapCenter: [114.05558, 22.539679],
      showImage: [],
      brandOptions: [{}],
      topics: [],
      props: {
        label: 'name',
        value: 'id',
        children: 'brands'
      },
      editorOption: {
        modules: {
          toolbar: [['bold', 'italic', 'underline', 'strike', 'link', 'image', 'align'], ['blockquote', 'code-block']]
        }
      },
      fileList: [],
      uploadAction: '',
      dialogVisible: false,
      dataForm: {
        topic: '',
        id: 0,
        userId: '',
        owner: '',
        facility: [],
        name: '',
        star: '',
        address: '',
        linkName: '',
        linkTel: '',
        tel: '',
        handle: '',
        openTime: '',
        renovationTime: '',
        wake: '',
        wifi: '',
        park: '',
        breakfast: '',
        unionpay: '',
        gym: '',
        boardroom: '',
        water: '',
        policy: '',
        introduction: '',
        img: '',
        rule: '',
        prompt: '',
        bqLogo: '',
        support: '',
        ewmLogo: '',
        time: '',
        coordinates: '',
        facilitatorName: '',
        superiorSellerName: '',
        scort: '',
        sfzImg1: '',
        sfzImg2: '',
        invitationCode: '',
        sfzImg3: '',
        yyImg: '',
        other: '',
        zdMoney: '',
        brand: [],
        reserveRemind: '',
        state: '',
        sqTime: '',
        isUse: '',
        llNum: '',
        bdId: '',
        yeOpen: '',
        wxOpen: '',
        ddOpen: '',
        freezeBalance: 0,
        city: ''
      },
      dataRule: {
        userId: [{ required: true, message: '用户ID不能为空', trigger: 'blur' }],
        owner: [
          {
            required: true,
            message: '1后台添加,2入住不能为空',
            trigger: 'blur'
          }
        ],
        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
        star: [{ required: true, message: '星级不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        linkName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
        linkTel: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
        tel: [{ required: true, message: '酒店电话不能为空', trigger: 'blur' }],
        handle: [{ required: true, message: '办理时间不能为空', trigger: 'blur' }],
        openTime: [{ required: true, message: '开业时间不能为空', trigger: 'blur' }],
        renovationTime: [{ required: true, message: '装修时间不能为空', trigger: 'blur' }],
        wake: [{ required: true, message: '唤醒不能为空', trigger: 'blur' }],
        wifi: [{ required: true, message: 'Wi-Fi不能为空', trigger: 'blur' }],
        park: [{ required: true, message: '停车场不能为空', trigger: 'blur' }],
        breakfast: [{ required: true, message: '早餐不能为空', trigger: 'blur' }],
        unionpay: [{ required: true, message: '银联支付不能为空', trigger: 'blur' }],
        gym: [{ required: true, message: '健身房不能为空', trigger: 'blur' }],
        boardroom: [{ required: true, message: '会议室不能为空', trigger: 'blur' }],
        water: [{ required: true, message: '不能为空', trigger: 'blur' }],
        policy: [{ required: true, message: '酒店政策不能为空', trigger: 'blur' }],
        introduction: [{ required: true, message: '酒店介绍不能为空', trigger: 'blur' }],
        img: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        rule: [{ required: true, message: '退订规则不能为空', trigger: 'blur' }],
        prompt: [{ required: true, message: '温馨提示不能为空', trigger: 'blur' }],
        bqLogo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        support: [{ required: true, message: '不能为空', trigger: 'blur' }],
        ewmLogo: [{ required: true, message: '酒店logo不能为空', trigger: 'blur' }],
        time: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
        coordinates: [{ required: true, message: '经纬度不能为空', trigger: 'blur' }],
        scort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        sfzImg1: [{ required: true, message: '身份证正面照不能为空', trigger: 'blur' }],
        sfzImg2: [{ required: true, message: '身份证反面照不能为空', trigger: 'blur' }],
        sfzImg3: [{ required: true, message: '身份证手持不能为空', trigger: 'blur' }],
        yyImg: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
        other: [{ required: true, message: '补充说明不能为空', trigger: 'blur' }],
        zdMoney: [{ required: true, message: '房间最低价格不能为空', trigger: 'blur' }],
        state: [
          {
            required: true,
            message: '1待审核,2通过，3拒绝不能为空',
            trigger: 'blur'
          }
        ],
        sqTime: [{ required: true, message: '申请时间不能为空', trigger: 'blur' }],
        isUse: [{ required: true, message: '平台优惠券使用不能为空', trigger: 'blur' }],
        llNum: [{ required: true, message: '不能为空', trigger: 'blur' }],
        bdId: [{ required: true, message: '绑定提现人不能为空', trigger: 'blur' }],
        yeOpen: [{ required: true, message: '余额支付不能为空', trigger: 'blur' }],
        wxOpen: [{ required: true, message: '微信支付不能为空', trigger: 'blur' }],
        ddOpen: [{ required: true, message: '到店支付不能为空', trigger: 'blur' }]
      }
    };
  },
  methods: {
    //自动预定提醒
    tx() {
      if (this.dataForm.reserveRemind) {
        this.$confirm('您已有预定提醒内容，是否覆盖?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellerTempl('reserveRemind');
        })
        return false
      }
      this.sellerTempl('reserveRemind');
    },
    //自动酒店介绍
    js() {
      if (this.dataForm.introduction) {
        this.$confirm('您已有酒店介绍内容，是否覆盖?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellerTempl('introduction');
        })
        return false
      }
      this.sellerTempl('introduction');
    },
    //自动获取政策
    zc() {
      if (this.dataForm.policy) {
        this.$confirm('您已有酒店政策内容，是否覆盖?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellerTempl('policy');
        })
        return false
      }
      this.sellerTempl('policy');
    },
    sellerTempl(type) {
      this.$http({
        url: this.$http.adornUrl(`/hotel/common/sellerTempl`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (type == 'policy') {
            this.dataForm.policy = data.zc.content
          }
          if (type == 'introduction') {
            this.dataForm.introduction = data.js.content
          }
          if (type == 'reserveRemind') {
            this.dataForm.reserveRemind = data.tx.content
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //自动获取周边
    jtzb() {
      var coordinates = this.dataForm.coordinates
      if (!coordinates) {
        this.$message.error("请先获取经纬度");
        return false
      }
      //已存在交通周边
      if (this.dataForm.traffic) {
        this.$confirm('您已有交通周边内容，是否覆盖?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sellerJiaoTong(coordinates);
        })
        return false
      }
      this.sellerJiaoTong(coordinates);
    },
    //身份证照手持
    sfschandleRemove(file, fileList) {
      this.dataForm.sfzImg3 = undefined;
      this.sfscfileList = [];
    },
    sfschandleSuccess(res, file) {
      const { url } = res;
      this.dataForm.sfzImg3 = url;
      this.sfscfileList.push({
        name: url,
        url: url
      });
    },
    //身份证照背面
    sfbhandleRemove(file, fileList) {
      this.dataForm.sfzImg2 = undefined;
      this.sfbfileList = [];
    },
    sfbhandleSuccess(res, file) {
      const { url } = res;
      this.dataForm.sfzImg2 = url;
      this.sfbfileList.push({
        name: url,
        url: url
      });
    },

    //身份证照正面
    sfzhandleRemove(file, fileList) {
      this.dataForm.sfzImg1 = undefined;
      this.sfzfileList = [];
    },
    sfzhandleSuccess(res, file) {
      const { url } = res;
      this.dataForm.sfzImg1 = url;
      this.sfzfileList.push({
        name: url,
        url: url
      });
    },
    //特种行业许
    tzhandleRemove(file, fileList) {
      this.dataForm.tzhyImg = undefined;
      this.tzfileList = [];
    },
    tzhandleSuccess(res, file) {
      const { url } = res;
      this.dataForm.tzhyImg = url;
      this.tzfileList.push({
        name: url,
        url: url
      });
    },
    //营业执照
    yyhandleRemove(file, fileList) {
      this.dataForm.yyImg = undefined;
      this.yyfileList = [];
    },
    yyhandleSuccess(res, file) {
      const { url } = res;
      this.dataForm.yyImg = url;
      this.yyfileList.push({
        name: url,
        url: url
      });
    },
    //预览
    handlePictureCardPreview(file) {
      // window.open(file.url)
      // console.log(file.url)
      // this.$alert('<img style="width: 100%;" src="'+file.url+'" />', '预览', {
      //   dangerouslyUseHTMLString: true
      // });
      this.index = 0;
      this.showImage = file.url;
    },
    handleview2(url) {
      this.index = 0;
      this.showImage = url;
    },
    //下载
    handleDownload(file) {
      window.open(file.url);
    },
    getImgs(img) {
      return (img || '')
        .split(',')
        .filter(url => !!url)
        .map(url => ({
          name: url,
          url
        }));
    },
    getTopics() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/hoteltopic/list`),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 999
        })
      }).then(({ data }) => {
        this.topics = data.page.list;
      });
    },
    getFacility() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/hotelfacility/list`),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 999,
          type: 1
        })
      }).then(({ data }) => {
        this.facility = data.page.list;
      });
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;

      pois.forEach(poi => {
        let { lng, lat } = poi;
        lngSum += lng;
        latSum += lat;
        this.markers.push([poi.lng, poi.lat]);
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      };
      this.mapCenter = [center.lng, center.lat];
    },
    //根据地址获取经纬度
    getCoordinates() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/common/getCoordinates`),
        method: 'get',
        params: this.$http.adornParams({
          address: this.dataForm.address
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataForm.coordinates = data.lng + ',' + data.lat;
          this.dataForm.city = data.city;
        }
      });
    },
    //获取交通周边
    sellerJiaoTong(location) {
      this.$http({
        url: this.$http.adornUrl(`/hotel/common/sellerJiaoTong`),
        method: 'get',
        params: this.$http.adornParams({
          location: location
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.htmlMap);
          this.dataForm.traffic = data.htmlMap.train;
          this.dataForm.traffic += "<p><br></p>";
          this.dataForm.traffic += data.htmlMap.airport;
          this.dataForm.traffic += "<p><br></p>";
          this.dataForm.traffic += data.htmlMap.metro;
          this.dataForm.traffic += "<p><br></p>";
          this.dataForm.traffic += data.htmlMap.cart;
          this.dataForm.traffic += "<p><br></p>";
          this.dataForm.traffic += data.htmlMap.shopping;
          this.dataForm.traffic += "<p><br></p>";
          this.dataForm.traffic += data.htmlMap.scenic;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getMarkerEvents() {
      return {
        click: ({ lnglat }) => {
          const host = 'https://restapi.amap.com/v3/geocode/regeo';
          axios.get(`${host}?location=${lnglat.lng},${lnglat.lat}&key=61da46f8202196bd6a794a0fd70d8a9b`).then(res => {
            if (!this.dataForm.address) {
              this.dataForm.address = res.data.regeocode.formatted_address;
            }
            if (Array.isArray(res.data.regeocode.addressComponent.city)) {
              this.dataForm.city = res.data.regeocode.addressComponent.province;
            } else this.dataForm.city = res.data.regeocode.addressComponent.city;
            this.dataForm.coordinates = lnglat.lng + ',' + lnglat.lat;
            console.debug(this.dataForm);
            this.showMap = false;
          });
        }
      };
    },
    fetchhotelBrands() {
      this.$http({
        url: this.$http.adornUrl('/hotel/seller/hotelBrands'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.brandOptions = [
            {
              name: '请选择',
              value: 0,
              brands: [{ name: '无', id: 0 }]
            },
            ...data.data
          ];
        }
        console.log(data);
      });
    },
    init(id) {
      this.fileList = [];
      this.yyfileList = []
      this.sfscfileList = []
      this.sfbfileList = []
      this.sfzfileList = []
      this.tzfileList = []
      this.getFacility();
      this.getTopics();
      this.fetchhotelBrands();
      this.uploadAction = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`);
      this.dataForm.id = id || 0;
      this.dataForm.brand = [0, 0];
      this.visible = true;
      this.$refs['dataForm'] && this.$refs['dataForm'].resetFields();
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/hotel/hotelseller/info/${this.dataForm.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            const hotelSeller = data.hotelSeller || {};
            this.dataForm = {
              ...hotelSeller,
              facility: hotelSeller.facility ? data.hotelSeller.facility.split(',') : [],
              brand: hotelSeller.brand ? hotelSeller.brand : [0, 0],
              wake: hotelSeller.wake === 1,
              wifi: hotelSeller.wifi === 1,
              park: hotelSeller.park === 1,
              breakfast: hotelSeller.breakfast === 1,
              unionpay: hotelSeller.unionpay === 1,
              gym: hotelSeller.gym === 1,
              boardroom: hotelSeller.boardroom === 1,
              water: hotelSeller.water === 1,
              yeOpen: hotelSeller.yeOpen === 1,
              wxOpen: hotelSeller.wxOpen === 1,
              ddOpen: hotelSeller.ddOpen === 1
            };
            if (hotelSeller.yyImg) {
              this.yyfileList.push({
                name: data.hotelSeller.yyImg,
                url: data.hotelSeller.yyImg
              });
            }
            if (hotelSeller.sfzImg3) {
              this.sfscfileList.push({
                name: data.hotelSeller.sfzImg3,
                url: data.hotelSeller.sfzImg3
              });
            }
            if (hotelSeller.sfzImg2) {
              this.sfbfileList.push({
                name: data.hotelSeller.sfzImg2,
                url: data.hotelSeller.sfzImg2
              });
            }
            if (hotelSeller.sfzImg1) {
              this.sfzfileList.push({
                name: data.hotelSeller.sfzImg1,
                url: data.hotelSeller.sfzImg1
              });
            }
            if (hotelSeller.tzhyImg) {
              this.tzfileList.push({
                name: data.hotelSeller.tzhyImg,
                url: data.hotelSeller.tzhyImg
              });
            }
            this.fileList = this.getImgs(hotelSeller.img);
          }
        });
      }
    },
    onEditorBlur() {},
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },

    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/hotelseller/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              ...this.dataForm,
              id: this.dataForm.id || undefined,
              facility: this.dataForm.facility
                .filter(f => f && f !== '')
                .reduce((p, n) => {
                  p += n + ',';
                  return p;
                }, ''),
              wake: this.dataForm.wake ? '1' : '0',
              wifi: this.dataForm.wifi ? '1' : '0',
              park: this.dataForm.park ? '1' : '0',
              breakfast: this.dataForm.breakfast ? '1' : '0',
              unionpay: this.dataForm.unionpay ? '1' : '0',
              gym: this.dataForm.gym ? '1' : '0',
              boardroom: this.dataForm.boardroom ? '1' : '0',
              water: this.dataForm.water ? '1' : '0',
              yeOpen: this.dataForm.yeOpen ? '1' : '0',
              wxOpen: this.dataForm.wxOpen ? '1' : '0',
              ddOpen: this.dataForm.ddOpen ? '1' : '0'
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit('refreshDataList');
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.dataForm.ewmLogo = res.url;
    },

    handleImageSuccess(res, file, fileList) {
      const list = fileList.map(item => {
        if (item.response) {
          return item.response.url;
        } else {
          return item.url;
        }
      });
      this.dataForm.img = list.join(',');
    },
    handleImageRemove(file, fileList) {
      this.handleImageSuccess({}, file, fileList);
    },
    beforeCardUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  }
};
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
.map-wrap {
  position: relative;

  .map {
    height: 400px;
  }

  .map-search {
    position: absolute;
    left: 20px;
    top: 20px;
  }
}
.disabled .el-upload--picture-card {
  display: none;
}
.hotelseller-addorupdate-jdss .el-form-item__content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .el-checkbox+.el-checkbox {
    margin-left: 0;
  }
  .el-checkbox {
    width: 100px;
  }
}
</style>
